<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title>商品详情</title>

    <link rel="stylesheet" href="../../static/css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/module/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="../../static/css/plugin/iconfont.css">
    <link rel="stylesheet" href="../../static/css/lib/main.css">
    <link rel="stylesheet" href="../../static/css/module/header.css">
    <link rel="stylesheet" href="../../static/css/module/footer.css">
    <link rel="stylesheet" href="../../static/css/module/zoomy.css">
    <link rel="stylesheet" href="../../static/css/page/store.css">
</head>
<body>
<div class="wrapper">
    <!-- 头部 -->
    <header class="hidden-xs">
        <nav class="mainnav">
            <div class="container">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
                        <ul class="nav nav-pills topnav" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a href="#">活动报名</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">楚才书店</a>
                            </li>
                            <li class="logo-item">
                                <img src="../../static/images/logo.png" width="105" height="104" alt="logo">
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">个人中心</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a href="#">登录/注册</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <!-- 正文内容 -->

    <!-- 商品列表 -->
    <div class="container">
        <div class="main-content main-content--mall main-content--detail">
            <div class="clearfix">
                <!-- 购物车 -->
                <div class="cart-wrapper cart-wrapper--detail pull-right js-cart-wrapper">
                    <a class="cart-link" href="javascript:;">
                        <span class="cart-link__left">
                            <i class="iconfont" id="end">&#xe600;</i> 购物车
                            <span class="cart-link__number">3</span>
                        </span>
                        <span class="cart-link__right">
                            <span class="triangle triangle--right"></span>
                        </span>
                    </a>
                    <div class="cart-content js-cart-content" style="display: none;">
                        <div class="cart-list">
                            <a class="cart-item" href="goodsDetail.html">
                                <div class="media">
                                    <div class="media-left cart-item__img">
                                        <img src="../../static/images/book.png" width="84" height="64" alt="书">
                                    </div>
                                    <div class="media-body cart-item__body">
                                        <h4 class="media-heading cart-item__name">夜莺《萤火虫小巷》作者最新作品夜莺《萤火虫小巷》作者最新作品夜莺《萤火虫小巷》作者最新作品</h4>
                                        <div class="cart-item__price">
                                            <em>¥<span>20</span></em>
                                            <span class="cart-item__count">x<span>1</span></span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a class="cart-item" href="goodsDetail.html">
                                <div class="media">
                                    <div class="media-left cart-item__img">
                                        <img src="../../static/images/book.png" width="84" height="64" alt="书">
                                    </div>
                                    <div class="media-body cart-item__body">
                                        <h4 class="media-heading cart-item__name">夜莺《萤火虫小巷》作者最新作品</h4>
                                        <div class="cart-item__price">
                                            <em>¥<span>20</span></em>
                                            <span class="cart-item__count">x<span>1</span></span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a class="cart-item" href="goodsDetail.html">
                                <div class="media">
                                    <div class="media-left cart-item__img">
                                        <img src="../../static/images/book.png" width="84" height="64" alt="书">
                                    </div>
                                    <div class="media-body cart-item__body">
                                        <h4 class="media-heading cart-item__name">夜莺《萤火虫小巷》作者最新作品</h4>
                                        <div class="cart-item__price">
                                            <em>¥<span>20</span></em>
                                            <span class="cart-item__count">x<span>1</span></span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a class="cart-item" href="goodsDetail.html">
                                <div class="media">
                                    <div class="media-left cart-item__img">
                                        <img src="../../static/images/book.png" width="84" height="64" alt="书">
                                    </div>
                                    <div class="media-body cart-item__body">
                                        <h4 class="media-heading cart-item__name">夜莺《萤火虫小巷》作者最新作品</h4>
                                        <div class="cart-item__price">
                                            <em>¥<span>20</span></em>
                                            <span class="cart-item__count">x<span>1</span></span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="cart-settlement">
                            <span class="cart-settlement__amount">
                                共
                                <em>3</em>
                                件商品
                            </span>
                            <em class="cart-settlement__total">¥<span>60</span></em>
                            <a class="cart-settlement__btn pull-right" href="#">去结算</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品内容展示 -->
            <div class="books-content clearfix">
                <div class="books-content__left pull-left">
                    <div class="preview">
                        <div id="vertical" class="bigImg">
                            <img class="mid-img" id="midimg" src="../../static/images/book.png" width="660" height="480" alt="书">
                            <div class="win-selector" id="winSelector" style="display:none;"></div>
                        </div>
                        <div class="smallImg">
                            <div class="scrollbutton smallImgUp disabled">
                                <span class="triangle triangle--left"></span>
                            </div>
                            <div class="image-menu" id="imageMenu">
                                <ul>
                                    <li id="onlickImg"><img src="../../static/images/book.png" width="155" height="115" alt="书"></li>
                                    <li><img src="../../static/images/activity.png" width="155" height="115" alt="书"></li>
                                    <li><img src="../../static/images/banner.png" width="155" height="115" alt="书"></li>
                                    <li><img src="../../static/images/book.png" width="155" height="115" alt="书"></li>
                                    <li><img src="../../static/images/book.png" width="155" height="115" alt="书"></li>
                                </ul>
                            </div>
                            <div class="scrollbutton smallImgDown">
                                <span class="triangle triangle--right"></span>
                            </div>
                        </div>
                        <div class="big-view" id="bigView" style="display:none;"><img width="1320" height="960" src="" alt="书"></div>
                    </div>
                </div>
                <div class="books-content__right pull-right">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <h4 class="mall-item__name">夜莺（《萤火虫小巷》作者最新作品，女性版《辛德勒的名单》，媲美《所有我们看不见的光》</h4>
                        </li>
                        <li class="list-group-item">
                            <em>¥20</em>
                            <del>¥58</del>
                        </li>
                        <li class="list-group-item">
                            <label>种类</label>
                            <span class="books-property">书</span>
                        </li>
                        <li class="list-group-item">
                            <label>数量</label>
                            <span class="numberbox js-numberbox">
                                <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--sub is-disabled js-number-sub">-</a>
                                <input class="pull-left numberbox__input js-number-input" pattern="[0-9]*" name="number" value="1">
                                <a href="javascript:;" class="pull-left numberbox__selector numberbox__selector--plus js-number-plus">+</a>
                            </span>
                        </li>
                    </ul>
                    <div class="btn-groups btn-groups--mall">
                        <button id="addCart" class="btn btn-yellow-border col-sm-6" type="button">加入购物车</button>
                        <button class="btn btn-submit col-sm-6" type="button">立即购买</button>
                    </div>
                </div>
            </div>
            <!-- 商家信息 -->
            <div class="business-info">
                <div class="col-sm-3 text-center">
                    <div class="business-logo"><i class="iconfont">&#xe605;</i></div>
                    <p>联系商家</p>
                </div>
                <div class="col-sm-9 border-left">
                    <div class="business-contact">
                        <p>楚才作文</p>
                        <p>电话：027-59709510</p>
                        <p>地址：武汉市江岸区长江日报路XX号</p>
                    </div>
                </div>
            </div>
            <!-- 商品详情 -->
            <div class="row books-detail">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="books-detail__title clearfix">
                        <div class="dividing-line col-sm-3"></div>
                        <h3 class="text-center col-sm-6">商品详情</h3>
                        <div class="dividing-line col-sm-3"></div>
                    </div>
                    <div class="books-detail__body">
                        <p>
                            克里斯汀·汉娜（Kristin Hannah），国内热销图书《萤火虫小巷》的作者。1960年9月出生于美国南加州，在海边堆沙堡和玩冲浪长大。曾在广告公司工作，也当过律师，而在她决定要去读律师时，她母亲说：“但你将来注定要当作家的。”事实证明母亲的话永远是正确的。
                            现在，克里斯汀·汉娜已经是《纽约时报》22本畅销书作者，最新代表作《夜莺》已被翻译成31种文字并且还在增长。
                            著名畅销书作家丹妮尔·斯蒂尔称《夜莺》是她最近读过的最棒的书。“女版马尔克斯” 伊莎贝尔·阿连德直呼《夜莺》趋于完美。
                            《夜莺》一书贯穿克里斯汀·汉娜作品的一贯风格，注重表现亲情、爱情与家庭价值，跨越不同年龄层的读者，同时将作品置于二战大背景之下，风格由清新转为恢弘，内心描写细腻深刻，是克里斯汀·汉娜史诗级的代表作。2015年甫一上市即占据《纽约时报》畅销书榜首，感动全球无数读者。
                            克里斯汀·汉娜现在是一个儿子的母亲，与丈夫生活在太平洋西北地区和夏威夷。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer class="hidden-xs">
    <div class="container">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                版权所有 武汉楚才竞赛网 鄂ICP备14016248号COPYRIGHT @2013-2014 CHUCAI.GNJ.CN ALL RIGHT RESERVED
                <img src="../../static/images/logo_cjrb.png" width="136" height="42" alt="cjrbLogo">
            </div>
        </div>
    </div>
</footer>

<div id="msg">已成功加入购物车！</div>

<script src="../../static/js/lib/jquery-1.9.1.min.js"></script>
<script src="../../static/js/lib/bootstrap.min.js"></script>
<script src="../../static/js/module/zoomy.js"></script>
<script src="../../static/js/module/jquery.fly.min.js"></script>
<!--[if lte IE 9]>
<script src="../../static/js/module/requestAnimationFrame.js"></script>
<![endif]-->
<script src="../../static/js/module/addCart.js"></script>
<script>
    $(function () {
        $(".js-cart-wrapper").hover(function () {
            $(this).find(".js-cart-content").show();
        }, function(){
            $(this).find(".js-cart-content").hide();
        });
    });
</script>
</body>
</html>